<title>个人日历</title>

<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div id='calendarOnly' style="height: 500px;"></div>
        </div>
    </div>
</div>

<input type="hidden" id="viewType" value="">
<input type="hidden" id="calendarStart" value="">
<input type="hidden" id="calendarEnd" value="">

<link href='./extends/fullcalendar-4.0.2/packages/core/main.css' rel='stylesheet' />
<link href='./extends/fullcalendar-4.0.2/packages/daygrid/main.css' rel='stylesheet' />
<link href='./extends/fullcalendar-4.0.2/packages/timegrid/main.css' rel='stylesheet' />
<link href='./extends/fullcalendar-4.0.2/packages/list/main.css' rel='stylesheet' />
<script type="text/javascript" src="./extends/fullcalendar-4.0.2/packages/core/locales/zh-cn.js"></script>
<script type="text/javascript" src='./extends/fullcalendar-4.0.2/packages/core/main.js'></script>
<script type="text/javascript" src='./extends/fullcalendar-4.0.2/packages/interaction/main.js'></script>
<script type="text/javascript" src='./extends/fullcalendar-4.0.2/packages/daygrid/main.js'></script>
<script type="text/javascript" src='./extends/fullcalendar-4.0.2/packages/timegrid/main.js'></script>
<script type="text/javascript" src='./extends/fullcalendar-4.0.2/packages/list/main.js'></script>

<script>
    //一般直接写在一个js文件中
    layui.use(['table', 'setter','jquery','form', 'common','totalFilter','commons'], function () {
        var table = layui.table;
        var setter = layui.setter;
        var form = layui.form;
        var common = layui.common;
        var commons = layui.commons;
        var $=layui.jquery;
        var totalFilter = layui.totalFilter;
        var tableH=commons.tabHeight('full-70');
        var calendarEl = document.getElementById('calendarOnly');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'zh-cn',
            height:tableH,
            buttonText: {
                today: '今天',
                month: '月',
                week: '周',
                day: '日'
            },
            allDaySlot:true,//allday 整天的日程是否显示
            timeFormat:'HH:mm',
            slotLabelFormat:{
                hour:'numeric',
                hour12:false
            },
            scrollTime:'08:00:00',//当切换到agenda时，初始滚动条滚动到的时间位置，默认在6点钟的位置
            firstDay:1,
            defaultView:'dayGridMonth',
            displayEventTime:false,
            displayEventEntTime:false,
            plugins: [ 'interaction', 'dayGrid', 'timeGrid'],
            //defaultDate: '2019-04-12',
            editable: false,
            eventLimit: true, // allow "more" link when too many events
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'timeGridDay,timeGridWeek,dayGridMonth'
            },
            viewSkeletonRender : function(info){
                var curView = info.view;
                var curEl = info.el;
                var startDate = curView.activeStart.valueOf();
                var endDate = curView.activeEnd.valueOf();
                $("#viewType").val(curView.type);
            },
            eventDrop:function(info){},
            eventResize: function(info) {},
            eventClick: function(info) {},
            eventMouseEnter:function(info ){},
            eventMouseLeave:function(info ){},
            events:function(info, successCallback, failureCallback){
                var viewType = $("#viewType").val();
                var url =  serverPath.systemPath + setter.sysLinkPath + 'sysMySchedule/queryschedule?startDate='+info.start.valueOf()+'&endDate='+info.end.valueOf()+'&viewType='+viewType+'&time='+new Date().getTime();
                $.ajax({
                    type : 'post',
                    url : url,
                    dataType : 'json',
                    success : function(result) {
                        if(result.code ===1){
                            layer.alert("数据查询失败");
                            return;
                        }
                        var events = [];
                        $.each(result.data,function(i,note){
                            var title = note.scheduleName;
                            var color = "#34c9df";
                            if(note.scheduleUrgency=='2'){
                                color="#ff7800";
                            }else if(note.scheduleUrgency=='1'){
                                color="#Fbc509";
                            }else if(note.scheduleUrgency=='0'){
                                color="#75e706";
                            }
                            var s1 = note.scheduleStart.substring(0,10);
                            var e1 = note.scheduleEnd.substring(0,10);
                            var timeStr = "";
                            if(s1==e1){
                                var s = note.scheduleStart.substring(11).substring(0,5);
                                var e = note.scheduleEnd.substring(11).substring(0,5);
                                if(e=="00:00"){
                                    e = "24:00";
                                }
                                timeStr = s+" - "+e+"\n"
                            }
                            events.push({
                                id : note.id,
                                title : timeStr+title,
                                start : removeZero(note.scheduleStart),
                                end : removeZero(note.scheduleEnd),
                                backgroundColor : color
                            });
                        });
                        successCallback(events);
                        $("#calendarStart").val(info.start.valueOf());
                        $("#calendarEnd").val(info.end.valueOf());
                    },
                    error:function(){
                        layer.alert("数据查询失败");
                    }
                });
            }
        });
        calendar.render();


        String.prototype.endWith=function(str){
            if(str==null||str==""||this.length==0||str.length>this.length)
                return false;
            if(this.substring(this.length-str.length)==str)
                return true;
            else
                return false;
            return true;
        }
        /**
         * 去掉日期字符串后边的00:00,否则影响全天日程的显示效果
         * @param dateStr 日程字符串
         * @returns {string|*}
         */
        function removeZero(dateStr){
            if(dateStr.endWith(" 00:00:00")){
                return dateStr.substring(0,10);
            }
            //年月日后边拼接大写字母T，否则在低版本火狐中显示有问题，只能显示全天日程
            var yyyymmdd = dateStr.substring(0,10);
            var hhmm = dateStr.substring(11);
            dateStr = yyyymmdd+"T"+hhmm;
            return dateStr;
        }

    });
</script>